<template>
  <div class="vip-page">
    <div class="vip-card">
      <div class="vip-header">
        <div class="vip-status">{{ t('svipopen_inactive') }}</div>
        <div class="vip-validity">{{ t('svipopen_validity') }} -</div>
        <div class="vip-logo">
          <img src="@/assets/images/user/svip_noopen.png" alt="VIP" />
        </div>
      </div>

      <div class="vip-benefits-list">
        <div class="vip-benefits-title">
          <img src="@/assets/images/q_left.png" class="q-icon q-left" alt="" />
          <span>{{ t('svipopen_benefits') }}</span>
          <img
            src="@/assets/images/q_right.png"
            class="q-icon q-right"
            alt=""
          />
        </div>
        <div class="benefit-item">
          <div class="benefit-icon income"></div>
          <div class="benefit-text">{{ t('svipopen_autoIncome') }}</div>
          <div class="benefit-action">
            <div class="action-div working">{{ t('svipopen_working') }}</div>
          </div>
        </div>

        <div class="benefit-item">
          <div class="benefit-icon coupon"></div>
          <div class="benefit-text">{{ t('svipopen_weeklyCoupon') }}</div>
          <div class="benefit-action">
            <div class="action-div claim">{{ t('svipopen_claim') }}</div>
          </div>
        </div>

        <div class="benefit-item">
          <div class="benefit-icon star"></div>
          <div class="benefit-text">
            {{ t('gpu_terima') }} <span class="gold-star">★</span>{{ t('svipopen_weeklyStar') }}
          </div>
          <div class="benefit-action">
            <div class="action-div claim">{{ t('svipopen_claim') }}</div>
          </div>
        </div>

        <div class="benefit-item">
          <div class="benefit-icon gift"></div>
          <div class="benefit-text">{{ t('svipopen_moreBenefits') }}</div>
        </div>
      </div>
    </div>

    <div class="vip-activation-section">
      <div class="section-title">{{ t('svipopen_activate') }}</div>

      <div class="duration-header" @click.stop="toggleDurationOptions">
        <div class="duration-label">{{ t('svipopen_duration') }}</div>
        <div class="duration-value">
          {{ selectedDuration }} {{ t('svipopen_month') }}
          <van-icon :name="showDurationOptions ? 'arrow-up' : 'arrow-down'" />
        </div>
      </div>

      <transition name="slide-fade">
        <div class="duration-options" v-if="showDurationOptions">
          <div
            class="option-item"
            :class="{ selected: selectedDuration === 1 }"
            @click.stop="selectDuration(1, false)"
          >
            <div class="option-radio">
              <div class="radio-dot" v-if="selectedDuration === 1"></div>
            </div>
            <div class="option-text">1 {{ t('svipopen_month') }}</div>
            <div class="option-price">COP100,000</div>
          </div>

          <div
            class="option-item"
            :class="{ selected: selectedDuration === 12 }"
            @click.stop="selectDuration(12, false)"
          >
            <div class="option-radio">
              <van-icon
                v-if="selectedDuration === 12"
                name="success"
                class="checkmark"
                color="#F6EADE"
                size="14px"
              />
            </div>
            <div class="option-text">12 {{ t('svipopen_month') }}</div>
            <div class="option-price">COP1,000,000</div>
          </div>
        </div>
      </transition>

      <div class="payment-label">{{ t('settle_selectWallet') }}</div>
      <div class="payment-options-direct">
        <div
          class="payment-option-item"
          :class="{ selected: selectedPayment.value === 'deposit' }"
          @click="selectPayment(paymentOptions[0])"
        >
          <div class="payment-option-content">
            <span
              :class="
                selectedPayment.value === 'deposit'
                  ? 'payment-option-text selected-text'
                  : 'payment-option-text'
              "
            >
            {{ t('profile_walletDeposit') }} (COP0)
            </span>
            <van-icon
              v-if="selectedPayment.value === 'deposit'"
              name="success"
              color="#A97B3A"
              size="18px"
            />
          </div>
        </div>
        <div
          class="payment-option-item"
          :class="{ selected: selectedPayment.value === 'income' }"
          @click="selectPayment(paymentOptions[1])"
        >
          <div class="payment-option-content">
            <span
              :class="
                selectedPayment.value === 'income'
                  ? 'payment-option-text selected-text'
                  : 'payment-option-text'
              "
            >
            {{ t('profile_walletIncome') }} (COP7,023)
            </span>
            <van-icon
              v-if="selectedPayment.value === 'income'"
              name="success"
              color="#A97B3A"
              size="18px"
            />
          </div>
        </div>
      </div>
    </div>

    <div class="bottom-bar">
      <div class="total-amount">
        <div class="total-label">{{ t('settle_total') }}</div>
        <div class="total-value">COP{{ formatNumber(totalAmount) }}</div>
      </div>
      <div class="payment-button" @click="processPayment">{{ t('svipopen_pay') }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { useRouter } from "vue-router";
import { formatNumber } from '@/utils/public';

const router = useRouter();
const { t } = useI18n()
const selectedDuration = ref(12); // 默认选择12个月
const showPaymentOptions = ref(false);
const showDurationOptions = ref(false); // 添加控制期限选项显示的状态

const paymentOptions = [
  { value: "deposit", label: t('profile_walletDeposit') + " (COP0)" },
  { value: "income", label: t('profile_walletIncome') + " (COP7,023)" },
];

const selectedPayment = ref(paymentOptions[0]); // 默认选择存款钱包

// 计算总金额
const totalAmount = computed(() => {
  if (selectedDuration.value === 1) {
    return 100000;
  } else {
    return 1000000;
  }
});

// 选择期限
function selectDuration(duration: number, autoClose: boolean = true) {
  selectedDuration.value = duration;
  if (autoClose) {
    showDurationOptions.value = false;
  }
}

// 切换期限选项显示
function toggleDurationOptions() {
  showDurationOptions.value = !showDurationOptions.value;
  if (showDurationOptions.value && showPaymentOptions.value) {
    showPaymentOptions.value = false;
  }
}

// 切换支付选项显示
function togglePaymentOptions() {
  showPaymentOptions.value = !showPaymentOptions.value;
  if (showPaymentOptions.value && showDurationOptions.value) {
    showDurationOptions.value = false;
  }
}

// 选择支付方式
function selectPayment(option: (typeof paymentOptions)[0]) {
  selectedPayment.value = option;
}

// 处理支付
function processPayment() {
  // 这里可以添加支付逻辑
  // console.log("处理支付:", {
  //   duration: selectedDuration.value,
  //   amount: totalAmount.value,
  //   paymentMethod: selectedPayment.value.value,
  // });

  // 支付后可以跳转到其他页面
  // router.push('/payment-success');
}
</script>

<style scoped>
.vip-page {
  min-height: 100vh;
  overflow: hidden;
  font-size: 15px;
  color: #f6eade;
  background: url("@/assets/images/login/topBg.png") no-repeat top;
  background-size: 100% auto;
}

.vip-card {
  margin: 15px;
  border-radius: 10px;
  overflow: hidden;
}

.vip-header {
  position: relative;
  padding: 15px;
  height: 70px;
}

.vip-status {
  font-size: 18px;
  font-weight: 600;
  color: #ffa500;
}

.vip-validity {
  font-size: 14px;
  color: #ff6347;
  margin-top: 5px;
}

.vip-logo {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 114px;
  height: 45px;
}

.vip-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vip-benefits-title {
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  margin: 10px 0;
  color: #f6eade;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.q-icon {
  width: 38px;
  height: 8px;
  vertical-align: middle;
}

.q-left {
  margin-right: 6px;
}

.q-right {
  margin-left: 6px;
}

.vip-benefits-list {
  background-color: rgba(254, 242, 230, 0.05);
  margin: 11px 0px 0px;
  border-radius: 0px 0px 5px 5px;
  padding: 8px;
}

.benefit-item {
  padding: 3px 5px;
  border-radius: 3px;
  line-height: 34px;
  margin: 11px 0px;
  border: rgba(254, 242, 230, 0.1) solid 0.5px;
  background-color: rgba(254, 242, 230, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.benefit-icon {
  width: 24px;
  height: 24px;
  margin-right: 10px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.income {
  background-image: url("@/assets/images/robot2.png");
}

.coupon {
  background-image: url("@/assets/images/couponicon.png");
}

.star {
  background-image: url("@/assets/images/score.png");
}

.gift {
  background-image: url("@/assets/images/reward.png");
}

.benefit-text {
  flex: 1;
  font-size: 14px;
  color: #f6eade;
}

.gold-star {
  color: #ffd700;
}

.benefit-action {
  margin-left: 10px;
}

.action-div {
  width: 85px;
  padding: 1px 5px;
  height: 26px;
  line-height: 26px;
  border-radius: 4px;
  margin: 0 auto;
  background: grey;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: hsla(0, 0%, 100%, 0.6);
}

.working {
  background: #696969;
  color: #ffffff;
}

.claim {
  background: #696969;
  color: #ffffff;
}

.vip-activation-section {
  margin: 15px;
  background: rgba(32, 27, 24, 0.9);
  border-radius: 10px;
  overflow: hidden;
  padding: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: 600;
  color: #f6eade;
  margin-bottom: 15px;
}

.duration-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  background: #221a15;
  border-radius: 5px;
  margin-bottom: 12px;
  cursor: pointer;
  border: 1px solid rgba(246, 234, 222, 0.15);
}

.duration-label {
  font-size: 14px;
  color: #f6eade;
  font-weight: 500;
}

.duration-value {
  font-size: 14px;
  color: #ffd700;
  display: flex;
  align-items: center;
  gap: 4px;
}

.duration-value .van-icon {
  font-size: 12px;
  color: #f6eade;
}

.duration-options {
  margin-bottom: 20px;
  background: transparent;
  overflow: hidden;
  border: none;
}

.option-item {
  display: flex;
  align-items: center;
  padding: 13px 15px;
  background: #221a15;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 8px;
  border: 1px solid rgba(246, 234, 222, 0.15);
}

.option-item:last-child {
  margin-bottom: 0;
}

.option-item.selected {
  border-color: rgba(246, 234, 222, 0.3);
}

.option-radio {
  width: 18px;
  height: 18px;
  border: 1px solid rgba(246, 234, 222, 0.5);
  border-radius: 50%;
  margin-right: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}

.radio-dot {
  width: 10px;
  height: 10px;
  background: #f6eade;
  border-radius: 50%;
}

.checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.option-text {
  flex: 1;
  font-size: 14px;
  color: #f6eade;
}

.option-price {
  font-size: 15px;
  color: #f6eade;
  font-weight: 500;
  text-align: right;
  flex-shrink: 0;
}

.payment-label {
  font-size: 14px;
  color: #f6eade;
  font-weight: 500;
  margin-bottom: 10px;
}

.payment-options-direct {
  margin-bottom: 20px;
}

.payment-option-item {
  padding: 0;
  margin-bottom: 10px;
  border-radius: 8px;
  border: none;
  background: none;
  box-shadow: none;
  transition: background 0.2s;
}

.payment-option-item.selected {
  background: #f6eade;
  border: none;
}

.payment-option-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 48px;
}

.payment-option-text {
  color: #f6eade;
  font-size: 15px;
  font-weight: normal;
}

.payment-option-text.selected-text {
  color: #2d1b18;
  font-weight: bold;
}

.payment-option-text.disabled-text {
  color: #a6a6a6;
}

.payment-option-item.selected .van-icon {
  margin-left: 8px;
}

.payment-option-item.disabled {
  background: #29211c;
  cursor: not-allowed;
}

.bottom-bar {
  display: flex;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  justify-content: space-between;
  border-top: 1px solid rgba(153, 153, 153, 0.2);
  height: 48px;
  background-color: rgb(34, 26, 24);
}

.total-amount {
  display: flex;
  align-items: center;
  margin-left: 10px;
}

.total-label {
  font-size: 14px;
  color: #f6eade;
  margin-right: 5px;
}

.total-value {
  font-size: 16px;
  font-weight: 600;
  color: #ff4500;
}

.payment-button {
  width: 149px;
  height: 48px;
  line-height: 48px;
  border-radius: 0;
  background:
    linear-gradient(270deg, #fee5cf, #dfb695 50%, #fee5cf),
    linear-gradient(180deg, #af917f 2%, #a9836b 99%);
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: #0c1f26;
}

/* 微调一下过渡动画 */
.slide-fade-enter-active,
.slide-fade-leave-active {
  transition: all 0.25s ease-out;
  max-height: 300px;
  overflow: hidden;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  max-height: 0;
  opacity: 0;
  margin-top: -10px;
}
</style>
